<template>
  <div class="scan">
    <div class="top">
      <div class="scansetting cp nodrag" @click="dialogTableVisible = true">
        设置
      </div>
      <div class="topbg"></div>
      <div class="middle">
        <div class="div1">保密文件扫描</div>
        <div class="slect">
          <el-select
            v-model="value"
            placeholder="Select"
            size="large"
            style="width: 480px; height: 64px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="precisionwrap df">
          <div class="name">当前进度: 34%</div>
          <div class="precision">
            <div class="div1"></div>
          </div>
          <img class="closefile" src="@/assets/img/closefile.png" alt="" />
        </div>
      </div>
      <div class="btn">开始扫描</div>
    </div>
    <div class="record df">
      <div class="div1"></div>
      <div class="name">最近扫描记录</div>
    </div>
    <div class="recordlist nodrag">
      <div class="list df" v-for="(item, index) in data" :key="index">
        <div class="y"></div>
        <div class="ycontent">
          <div class="ytop">2024-02-20｜XXXX扫描任务</div>
          <div class="middle df">
            <div class="div1">路径：C盘，D盘</div>
            <div class="div1">耗时：5：53：24</div>
            <div class="div1">仅处置最新纪录</div>
          </div>
          <div class="bottom df">
            <div class="bottomdiv">
              <div class="div1">1,433,456</div>
              <div class="div2">总文件</div>
            </div>
            <div class="bottomdiv">
              <div class="div1">1,433,456</div>
              <div class="div2">总文件</div>
            </div>
            <div class="bottomdiv">
              <div class="div1">1,433,456</div>
              <div class="div2">总文件</div>
            </div>
            <div class="bottomdiv">
              <div class="div1">1,433,456</div>
              <div class="div2">总文件</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="scrollbg"></div>
    <el-dialog
      v-model="dialogTableVisible"
      title="Shipping address"
      center
      width="1000px"
      height="720px"
    >
      <div style="height: 400px; background: red"></div>
    </el-dialog>
  </div>
</template>
    
<script>
export default {
  name: "confidentialdocuments",
  data() {
    return {
      value: "",
      dialogTableVisible: false,
      index: 1,
      options: [
        {
          value: "Option1",
          label: "Option1",
        },
      ],
      gridData: [
        {
          date: "2016-05-03",
          name: "John Smith",
          address: "No.1518,  Jinshajiang Road, Putuo District",
        },
      ],
      data: [12, 45, 4],
    };
  },
  methods: {},
};
</script>
    
<style lang="less" scoped>
.scan {
  position: relative;
  height: 664px;
  width: 1060px;
  background-color: #fafafa;
  .top {
    display: flex;
    padding-top: 24px;
    margin: 0 0 0 60px;
    .scansetting {
      position: absolute;
      right: 32px;
      top: 24px;
      width: 103px;
      height: 40px;
      background: #ffffff;
      border-radius: 22px;
      border: 2px solid #979797;
      text-align: center;
      line-height: 35px;
      font-size: 20px;
      color: #595959;
    }
    .topbg {
      width: 200px;
      height: 200px;
      background-image: url(@/assets/img/sm.png);
      background-size: cover;
    }
    .middle {
      width: 480px;
      margin: 0 40px 0 24px;
      .div1 {
        width: 192px;
        height: 32px;
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        font-size: 32px;
        color: #262626;
        line-height: 32px;
        text-align: left;
        font-style: normal;
        padding-top: 19px;
      }
      .slect {
        width: 480px;
        height: 64px;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 40px;
        border: 2px solid rgba(0, 0, 0, 0.25);
        margin-top: 43px;
      }
      .precisionwrap {
        margin-top: 24px;
        .name {
          width: 113px;
          height: 16px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          color: #262626;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          margin-top: 8px;
        }
        .precision {
          width: 320px;
          background: #f0f0f0;
          border-radius: 8px;
          margin-left: 24px;
          height: 16px;
          margin-top: 8px;
          .div1 {
            width: 119px;
            height: 16px;
            background: linear-gradient(90deg, #35c3ff 0%, #1890ff 100%);
            border-radius: 8px;
          }
        }
        .closefile {
          width: 32px;
          height: 32px;
          margin-left: 16px;
        }
      }
    }
    .btn {
      width: 200px;
      height: 80px;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15);
      border-radius: 40px;
      border: 4px solid #ffffff;
      line-height: 70px;
      text-align: center;
      font-weight: bold;
      font-size: 32px;
      color: #262626;
      font-style: normal;
      margin-top: 66px;
      cursor: pointer;
    }
  }
  .recordlist {
    margin: 38px 0 0 34px;
    height: 328px;
    position: relative;
    overflow: scroll;
    .list {
      height: 156px;
      position: relative;
      z-index: 10;
      margin-bottom: 44px;
      .y {
        width: 12px;
        height: 12px;
        background: #bfbfbf;
        border-radius: 12px;
        margin-right: 16px;
        margin-top: 2px;
        position: relative;
      }
      .ycontent {
        .ytop {
          height: 20px;
          font-family: MicrosoftYaHei;
          font-size: 20px;
          color: #262626;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        .middle {
          margin-top: 16px;
          .div1 {
            width: 220px;
            font-size: 16px;
            color: #262626;
            margin-right: 8px;
          }
        }
        .bottom {
          margin-top: 16px;
          .bottomdiv {
            width: 220px;
            height: 80px;
            background: #ffffff;
            border-radius: 4px;
            margin-right: 8px;
            .div1 {
              font-weight: bold;
              font-size: 20px;
              color: #262626;
              line-height: 20px;
              padding-top: 18px;
              margin-left: 32px;
              margin-bottom: 8px;
            }
            .div2 {
              font-size: 16px;
              color: #262626;
              margin-left: 32px;
            }
          }
        }
      }
    }
  }
  .scrollbg {
    position: absolute;
    width: 12px;
    background: #f0f0f0;
    z-index: 0;
    height: 380px;
    left: 34px;
    top: 284px;
  }
}
</style>